<template>
  <view style="height: 100vh; background: #fff">
    <image class="bg" src="../../static/home/bg.png" mode="aspectFill" />
    <u-navbar :title="type === '1' ? '图片压缩' : type === '2' ? '视频压缩' : '文字识别'" bgColor="rgba(0,0,0,0)" auto-back></u-navbar>
    <view class="con">
      <view class="box">
        <image v-if="type === '1'" @click="TanPreviewImage([info.url], 1)" :src="info.url" style="width: 656rpx; height: 656rpx" mode="aspectFill" />
        <video v-if="type === '2'" :show-play-btn="true" :show-fullscreen-btn="true" :src="info?.url"></video>
        <view class="zz" :controls="false" v-if="type === '2'" @click="videoShow = true"></view>
        <view class="sub" v-if="type === '1' || type === '2'"
          >{{ info.originSize }}KB -> {{ info.targetSize }} KB <text>已压缩 {{ (((info.originSize - info.targetSize) / info.originSize) * 100).toFixed(2) }} %</text>
        </view>
      </view>
      <view class="textB1" v-if="type === '3'">
        <image class="textImg" :src="info?.url" mode="aspectFill" />
        <view class="textBox"> {{ info?.text || "未识别出文字" }} </view>
      </view>
      <view class="btn">
        <u-button v-if="type !== '3'" type="primary" shape="circle" icon="download" @click="downLoadFn">下载{{ type === "2" ? "视频" : "图片" }}</u-button>
        <u-button v-else type="primary" shape="circle" @click="copyFn(info.text)">复制文字</u-button>
      </view>
    </view>
    <u-overlay :show="videoShow" opacity="1" :mask-click-able="false">
      <view class="show">
        <video :show-play-btn="true" object-fit="cover" autoplay :show-fullscreen-btn="true" :src="info?.url"></video>
        <view class="icon l" @click="videoShow = false"><u-icon name="close" bold color="#FFf"></u-icon></view>
        <view class="icon r" @click="share"><image src="../../static/home/zf.png" mode="aspectFill" /></view>
      </view>
    </u-overlay>
  </view>
</template>
<script setup lang="ts">
import { useFilesStore } from "@/stores/files";
import { copyFn } from "@/utils/commonFn";
import { TanPreviewImage } from "@/utils/commonFn";
import { ref } from "vue";
const { type } = defineProps<{
  type: "1" | "2" | "3";
}>();
const info = useFilesStore().videoInfo;
const videoShow = ref(false);
console.log(info);

const downLoadFn = () => {
  console.log(123, info.url);

  uni.downloadFile({
    url: info.url, //分享的图片的链接
    success: (res) => {
      uni.getFileSystemManager().saveFile({
        tempFilePath: res.tempFilePath,
        success(res) {
          //保存图片
          if (type === "1") {
            uni.saveImageToPhotosAlbum({
              filePath: res.savedFilePath,
            });
            uni.showToast({
              title: "图片已保存到相册",
              icon: "success",
              duration: 2000,
            });
          } else if (type === "2") {
            uni.saveVideoToPhotosAlbum({
              filePath: res.savedFilePath,
            });
            uni.showToast({
              title: "视频已保存到相册",
              icon: "success",
              duration: 2000,
            });
          }
        },
      });
    },
    complete() {
      //隐藏loading
      uni.hideLoading();
    },
    fail(err) {
      console.log(err, "shareImg");
    },
  });
};
const share = () => {
  uni.downloadFile({
    url: info.url,
    success(res: any) {
      //@ts-ignore
      wx.shareVideoMessage({
        videoPath: res.tempFilePath,
        success() {},
        fail: console.error,
      });
    },
    fail: console.error,
  });
};
</script>
<style lang="less" scoped>
.bg {
  width: 100%;
  height: 1362rpx;
  position: absolute;
  left: 0;
  z-index: 1;
}
.con {
  position: relative;
  padding: 0 30rpx;
  z-index: 2;
  padding-top: 190rpx;
  .box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    .zz {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9;
    }
  }
  .btn {
    box-shadow: 0rpx 20rpx 30rpx 0rpx rgba(100, 73, 218, 0.3);
    width: 400rpx;
    margin: 90rpx auto;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
  }
  .sub {
    font-size: 28rpx;
    color: #3d3d3d;
    margin-top: 28rpx;
    text {
      background: rgba(59, 112, 253, 0.17);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 26rpx;
      color: #ffffff;
      padding: 0 10rpx;
    }
  }
}
.textB1 {
  text-align: center;
  .textImg {
    width: 100%;
    height: 360rpx;
  }
  .textBox {
    margin-top: 28rpx;
    text-align: left;
    padding: 38rpx 22rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    border: 2rpx dashed #767676;
    font-size: 32rpx;
    color: #3d3d3d;
  }
}
.show {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  video {
    width: 100%;
    height: 70%;
  }
  .icon {
    position: absolute;
    bottom: 50rpx;
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
  }
  .l {
    left: 30rpx;
  }
  .r {
    right: 30rpx !important;
    background: none;

    image {
      width: 64rpx;
      height: 64rpx;
    }
  }
}
</style>
